<template>
  	<div class="index">
		<!-- 轮播图 -->
      	<index-carousel></index-carousel>
		<div class="content">
			<!-- 选项卡商品 -->
			<index-options></index-options>
			<!-- 探索更多 -->
			<a-row type="flex" justify="center">
      			<a-col :xs="20" :sm="20" :md="11" :lg="11" :xl="12" v-for="item in explore" :key="item.id">
      			  	<explore :data="item"></explore>
      			</a-col>
    		</a-row>
			<!-- 代言人 -->
			<div class="spokesman">
				<a-row type="flex" justify="center">
      				<a-col :xs="22" :sm="19" :md="19" :lg="11" :xl="11" class="item1">
      				  	<span>彭于晏</span>
						<img src="../assets/image/表ia_10178.jpg" alt="">
      				</a-col>
      				<a-col :xs="22" :sm="19" :md="19" :lg="11" :xl="11" class="item2">
      				  	<span>赵丽颖</span>
						<img src="../assets/image/表ia_10173.jpg" alt="">
      				</a-col>
    			</a-row>
			</div>
		</div>
		<!-- 系列商品 -->
		<div class="series">
			<index-series 
			v-for="item in series"
			:key="item.id"
			:indexData="item.classid"
			></index-series>
		</div>
		<!-- 搜索腕表和商店 -->
		<div class="lookFor">
			<a-row type="flex" justify="center">
      			<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
      			  	<router-link to="">
						<img src="../assets/image/表ia_10200.jpg" alt="">
					</router-link>
      			</a-col>
      			<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
      			  	<router-link to="">
						<img src="../assets/image/表ia_10199.jpg" alt="">
					</router-link>
      			</a-col>
    		</a-row>
			<!-- 服务和品质 -->
			<a-row type="flex" justify="center">
      			<a-col :span='24' class="hidden-xs-only">
					<img src="../assets/image/longines_service2.jpg" alt="">
      			</a-col>
      			<a-col :span='24' class="hidden-sm-and-up">
					<img src="../assets/image/表ia_10198.jpg" alt="">
      			</a-col>
    		</a-row>
		</div>
		<!-- 底部新闻和关注我们 -->
		<div class="other">
			<div class="news">
				<router-link to="">
					<span>浪琴新闻</span>
					<img src="../assets/image/表ia_10185.jpg" alt="">
				</router-link>
			</div>
			<!-- 关注我们 -->
			<div class="Concern">
				<div class="ConcernBtn">
					<span @mouseover="show = 'show'" @mouseleave=" show = '' "></span>
				</div>
				<div class="Concerncode">
					<img src="../assets/image/表ia_10187.jpg" alt="">
					<img src="../assets/image/表ia_10188.jpg" alt="" :class="show">
					<img src="../assets/image/表ia_10196.png" alt="">
				</div>
			</div>
		</div>
  	</div>
</template>

<script>
import IndexCarousel from '../components/IndexCarousel.vue'
import IndexOptions from '../components/IndexOptions.vue'
import IndexSeries from '../components/IndexSeries.vue'
import Explore from '../components/Explore.vue'
import {getGoods} from '../assets/js/request.js'
// import  '../assets/image/表ia_10178.jpg'
// import  '../assets/image/表ia_10173.jpg'
export default {
	components:{
		IndexCarousel,
		IndexOptions,
		Explore,
		IndexSeries
	},
	data() {
		return {
			show: "",
			//探索商品
			explore:[],
			// 系列商品
			series:[
				{id:1, classid: 173},
				{id:2, classid: 174},
				{id:3, classid: 172}
			]
		}
	},
	created() {
		// 请求探索商品
		getGoods(10, 331)
		.then(res=>{
			// console.log(res)
			res.rows.forEach((item, index) => {
				this.explore.push({
					id: index,
					name: item.name,
					path: item.s_goods_photos[0].path
				})
			})
			console.log(this.explore)
		})
	},
}
</script>

<style lang="scss" scoped>
	.index {
		.content {
			width: 90%;
			margin: 0 auto;
			.spokesman {
				text-align: left;
				.item1,
				.item2 {
					margin: 80px 15px 100px;
					@media (max-width: 998px) {
						margin: 20px 15px 20px;
					}
					span {
						display: inline-block;
						font-size: 20px;
						margin: 20px 0;
					}
					img {
						width: 100%;
					}
				}
			}
		}
		// 搜索腕表和商店
		.lookFor {
			img	{
				width: 100%;
			}
		}
		.other {
			width: 90%;
			margin: 0 auto 100px;
			.news {
				margin: 40px 0 80px;
				text-align: left;
				a {
					color: #003570;
					span {
						display: inline-block;
						font-size: 20px;
						margin: 20px 0;
					}
					img {
						width: 100%;
					}
				}
			}
			.Concern {
				.ConcernBtn {
					text-align: right;
					span {
						display: inline-block;
						width: 150px;
						height: 47px;
						margin-bottom: 40px;
						background: url("../assets/image/follow_us_icons.jpg") no-repeat;
						background-size: cover;
						&:hover {
							background-position-y: -47px;
						}
					}
				}
				.Concerncode {
					position: relative;
					&:hover img:nth-child(2) {
						display: inline-block;
					}
					// 显示类
					.show {
						display: inline-block !important;
					}
					img {
						width: 100%;
						&:nth-child(2) {
							display: none;
							position: absolute;
							top: 0;
							left: 0;
						}
						&:nth-child(3) {
							position: absolute;
							top: -15%;
							left: 17%;
							width: 15%;
						}
					}
				}
			}
		}
	}
</style>